Agentic Review: Introduce Review addon#34837
Open
yannbf wants to merge 157 commits into
Open
Conversation
New @storybook/addon-review-changes. An ADE agent pushes a review via the MCP addon; it is broadcast over the Storybook channel; this addon's page receives it (and requests a replay on mount for late/refreshed tabs) and renders the raw agent state — narrative, clusters, changed files, diff hunks, per-story metadata.
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR introduces ChangesReview Changes Addon Implementation
CSF Type-level Test Refinement
🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related issues
Possibly related PRs
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
scripts/build/entry-configs.ts (1)
4-4: ⚡ Quick winMaintain alphabetical ordering in imports and exports.
Both the import statement and the
buildEntriesproperty for@storybook/addon-review-changesare placed out of alphabetical order. They should appear afteronboardingand beforethemes(or beforepseudo-statesif sorting@storybook/addon-*packages separately).📝 Suggested reordering
Move the import from line 4 to after line 10 (after
onboardingConfig):// `@ts-ignore` import onboardingConfig from '../../../code/addons/onboarding/build-config'; +// `@ts-ignore` +import reviewChangesConfig from '../../../code/addons/review-changes/build-config'; // `@ts-ignore` import pseudoStatesConfig from '../../../code/addons/pseudo-states/build-config';Move the buildEntries property from line 94 to after line 97 (after
addon-onboarding):'`@storybook/addon-onboarding`': onboardingConfig, + '`@storybook/addon-review-changes`': reviewChangesConfig, 'storybook-addon-pseudo-states': pseudoStatesConfig,Remove the current lines 4 and 94.
Also applies to: 94-94
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@scripts/build/entry-configs.ts` at line 4, The import reviewChangesConfig is out of alphabetical order; move the import statement for reviewChangesConfig (currently importing '../../../code/addons/review-changes/build-config') to sit after onboardingConfig (i.e., after the onboarding import) so imports remain alphabetized; likewise find the buildEntries array where the `@storybook/addon-review-changes` entry is added and move that entry (the buildEntries property for `@storybook/addon-review-changes`) to appear after the addon-onboarding entry (or between onboarding and themes / before pseudo-states if you sort addon-* separately) so the buildEntries list remains alphabetically ordered.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@code/addons/review-changes/package.json`:
- Line 3: Update the version of the `@storybook/addon-review-changes` package to
match the rest of the Storybook packages: change the "version" field in
package.json for the review-changes addon from "10.4.0-alpha.17" to
"10.5.0-alpha.0" and also update the corresponding entry in the auto-generated
versions list (look for the review-changes entry in
code/core/src/common/versions.ts) so both locations are consistent; if this
addon intentionally needs a different version, add a brief comment in
package.json (or a README) explaining the separate release requirement instead
of leaving mismatched version strings.
In `@code/addons/review-changes/src/components/ReviewChangesPage.tsx`:
- Around line 253-255: The event handler for EVENTS.APPLY_REVIEW_STATE currently
assumes the payload is a valid ReviewState and directly calls setState(next);
add a runtime guard in the useChannel callback to validate the shape (e.g.,
ensure next is an object, has a clusters array and each cluster has
sampleStoryIds array, etc.) and only call setState(next) when the guard passes;
if validation fails, ignore the payload (optionally log a warning) to prevent
downstream errors in components that access state.clusters or
cluster.sampleStoryIds. Use the existing symbols useChannel,
EVENTS.APPLY_REVIEW_STATE, setState and ReviewState to locate the handler and
implement the guard at that event boundary.
---
Nitpick comments:
In `@scripts/build/entry-configs.ts`:
- Line 4: The import reviewChangesConfig is out of alphabetical order; move the
import statement for reviewChangesConfig (currently importing
'../../../code/addons/review-changes/build-config') to sit after
onboardingConfig (i.e., after the onboarding import) so imports remain
alphabetized; likewise find the buildEntries array where the
`@storybook/addon-review-changes` entry is added and move that entry (the
buildEntries property for `@storybook/addon-review-changes`) to appear after the
addon-onboarding entry (or between onboarding and themes / before pseudo-states
if you sort addon-* separately) so the buildEntries list remains alphabetically
ordered.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: dd7cacb6-4f1f-41f2-85bd-dcf5d02ce4fa
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (14)
code/.storybook/main.tscode/addons/review-changes/build-config.tscode/addons/review-changes/manager.jscode/addons/review-changes/package.jsoncode/addons/review-changes/project.jsoncode/addons/review-changes/src/components/ReviewChangesPage.tsxcode/addons/review-changes/src/components/ReviewChangesView.stories.tsxcode/addons/review-changes/src/constants.tscode/addons/review-changes/src/index.tscode/addons/review-changes/src/manager.tsxcode/addons/review-changes/src/review-state.tscode/addons/review-changes/tsconfig.jsoncode/core/src/common/versions.tsscripts/build/entry-configs.ts
yannbf
added
the
ci:normal
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 0 | 0 | 0 |
| Self size | 0 B | 222 KB | 🚨 +222 KB 🚨 |
| Dependency size | 0 B | 654 B | 🚨 +654 B 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/builder-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 184 | 184 | 0 |
| Self size | 79 KB | 79 KB | 🎉 -48 B 🎉 |
| Dependency size | 33.98 MB | 33.99 MB | 🚨 +15 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 72 | 72 | 0 |
| Self size | 20.74 MB | 20.85 MB | 🚨 +113 KB 🚨 |
| Dependency size | 36.12 MB | 36.12 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/ember
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 189 | 189 | 0 |
| Self size | 15 KB | 15 KB | 🎉 -18 B 🎉 |
| Dependency size | 30.80 MB | 30.81 MB | 🚨 +15 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 534 | 534 | 0 |
| Self size | 662 KB | 662 KB | 0 B |
| Dependency size | 62.16 MB | 62.18 MB | 🚨 +15 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 271 | 271 | 0 |
| Self size | 23 KB | 23 KB | 0 B |
| Dependency size | 46.70 MB | 46.71 MB | 🚨 +15 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/server-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 196 | 196 | 0 |
| Self size | 16 KB | 16 KB | 🚨 +12 B 🚨 |
| Dependency size | 35.24 MB | 35.26 MB | 🚨 +15 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 203 | 203 | 0 |
| Self size | 948 KB | 948 KB | 0 B |
| Dependency size | 88.99 MB | 89.10 MB | 🚨 +115 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 196 | 196 | 0 |
| Self size | 32 KB | 32 KB | 🚨 +36 B 🚨 |
| Dependency size | 87.48 MB | 87.59 MB | 🚨 +115 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 73 | 73 | 0 |
| Self size | 1.08 MB | 1.08 MB | 0 B |
| Dependency size | 56.85 MB | 56.97 MB | 🚨 +113 KB 🚨 |
| Bundle Size Analyzer | node | node |
@storybook/preset-react-webpack
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 164 | 164 | 0 |
| Self size | 18 KB | 18 KB | 0 B |
| Dependency size | 32.48 MB | 32.50 MB | 🚨 +14 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
…nused files - Updated import path for ReviewChangesPage component. - Deleted unused ReviewChangesDetailsScreen, ReviewChangesPage, ReviewChangesScreen, and ReviewCollectionGrid components along with their associated stories. - Streamlined the codebase by removing obsolete files to enhance maintainability.
This reverts commit e3fcd45.
…handling and add stories - Added location search handling to ReviewChangesPage to parse collection and story parameters. - Introduced ReviewChangesPage stories to demonstrate various states and interactions. - Updated CollectionGrid and SummaryScreen components for improved naming consistency and functionality.
Review Changes: Implement review changes screen based on latest designs
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@code/addons/review-changes/src/screens/SummaryScreen.tsx`:
- Line 324: The two SearchInput instances in SummaryScreen.tsx currently rely on
placeholder text for identification; add explicit accessible names by supplying
either an aria-label (e.g., aria-label="Search stories") or connecting a
visible/visually-hidden <label> via id/for to each SearchInput component
(reference the SearchInput elements in SummaryScreen.tsx for both occurrences).
Ensure the labels are unique and descriptive for each input (e.g., "Find
stories" and any other context-specific label) so assistive technologies receive
a programmatic name.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 218101ef-b8c6-49d0-a5b9-9b3d9976a917
📒 Files selected for processing (12)
code/addons/review-changes/src/ReviewChangesPage.stories.tsxcode/addons/review-changes/src/ReviewChangesPage.tsxcode/addons/review-changes/src/components/CollectionGrid.stories.tsxcode/addons/review-changes/src/components/CollectionGrid.tsxcode/addons/review-changes/src/index.tscode/addons/review-changes/src/manager.tsxcode/addons/review-changes/src/review-navigation.tscode/addons/review-changes/src/review-state.tscode/addons/review-changes/src/screens/DetailsScreen.stories.tsxcode/addons/review-changes/src/screens/DetailsScreen.tsxcode/addons/review-changes/src/screens/SummaryScreen.stories.tsxcode/addons/review-changes/src/screens/SummaryScreen.tsx
✅ Files skipped from review due to trivial changes (1)
- code/addons/review-changes/src/review-navigation.ts
…w-design-iterations
… navigation logic, and enhance URL handling for review states. Add new ReviewPage component and associated stories for improved review flow.
…tate` to `request-review`. Update related references in the codebase for consistency.
… and TabButton styled components, and update layout for improved tab functionality and accessibility.
Replace the addon's bespoke storyPreviewUrl/buildStorybookStoryHref with the manager API's getStoryHrefs, extended with a freeze option for the static summary thumbnails. Preview/manager hrefs are now built in ReviewPage and passed down to the pure grid and detail components. Story preview-URL tests move to manager-api url.test alongside getStoryHrefs.
Replace the hardcoded default baseline origin and the implicit storybook-static directory with a single STORYBOOK_REVIEW_BASELINE env var. A safe project- relative path is served as a static build; a valid http(s) URL is proxied as a remote origin; anything else is ignored with a warning.
ghengeveld
approved these changes
Jun 5, 2026
yannbf
commented
Jun 8, 2026
yannbf
left a comment
yannbf
left a comment
Member
Author
There was a problem hiding this comment.
Generally LGTM, I added a few comments
Expose the hook from storybook/internal/components and align review CopyButton props with UseCopyButtonOptions.
Replace needle/haystack naming with searchQuery, lowerCaseText, and matchIndex.
…th 1up UX Pin CopyButton to UseCopyButtonOptions<ReactNode> so JSX childrenOnCopy type-checks, and update WithBaseline to expect only the Latest label in default 1up mode with a new WithBaselineSplit story for 2up.
Adopt next's open-service module-graph architecture (the change-detection engine moved under shared/open-service/services/module-graph and was kebab-cased; old barrels removed). Keep this branch's source-changes staleness glue layered on top so addon-review's stale-review detection keeps working: - module-graph-engine.ts: re-add notifySourceFileChange(event) in handleFileChange, importing the notifier from its new relative path. - core-server/index.ts: re-export experimental_subscribeToSourceFileChanges directly from change-detection/source-changes.ts (old barrel is gone), alongside next's errors/readiness exports. - source-changes.ts (+ test): repoint FileChangeEvent to the relocated module-graph adapters types. This preserves the old change-detection path intentionally; it will be removed and replaced with the core/module-graph getGraphRevision subscription in a follow-up. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the source-changes change-detection glue entirely with the
open-service architecture. addon-review now subscribes to the
`core/module-graph` service's getGraphRevision query instead of the
process-wide source-file notifier:
- preset.ts subscribes via getService('core/module-graph') →
queries.getGraphRevision.subscribe(undefined, …); a review goes stale
on the first revision advance after createdAt (past the grace window).
- Remove notifySourceFileChange from the module graph engine.
- Delete source-changes.ts and its test (dead glue).
- Export the moduleGraphServiceDef type from core-server for typing the
service handle; drop the experimental_subscribeToSourceFileChanges export.
This also scopes staleness to in-graph changes — unrelated file edits no
longer trip the banner.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What I did
This PR introduces a new
@storybook/addon-reviewaddon: an in-Storybook UI for reviewing agent-produced changes.Flow: an ADE agent pushes a review via the MCP addon (
@storybook/addon-mcp); the dev server enriches it with the current git branch, caches it, and broadcasts it over the Storybook channel; the addon's page receives it (and requests a replay on mount so late/refreshed tabs catch up) and renders it.The review experience has two views:
Additional capabilities:
storybook-staticwhen available or via a proxy fallback (with timeouts and deterministic error handling). Stories missing from the baseline get a "New" badge.StoryDependencyGraphService) watches source changes and flags affected stories, also surfaced via "New" badges.freeze=finishedmode halts preview interactions and animations once a story finishes rendering (used by the review summary's thumbnails), plus a manager setting to control the behavior.Also includes a responsive CollectionGrid with lazy iframe mounting (throttling, prioritization, and eviction), server-side branch resolution/caching/replay for late-joining tabs, navigation + grouping utilities, stories, and unit tests.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Caution
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
yarn task --task sandbox --start-from auto --template react-vite/default-tsDocumentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This pull request has been released as version
0.0.0-pr-34837-sha-5a29808e. Try it out in a new sandbox by runningnpx storybook@0.0.0-pr-34837-sha-5a29808e sandboxor in an existing project withnpx storybook@0.0.0-pr-34837-sha-5a29808e upgrade.More information
0.0.0-pr-34837-sha-5a29808eyann/agentic-review-mcp-integration5a29808e1781183107)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=34837Summary by CodeRabbit
Release Notes
New Features
freeze=finishedis enabledDocumentation